<template>
	<el-container>
		<el-header>录入检查结果</el-header>
		<el-main>
			<el-row :gutter="20" :data="tableData">
				<el-col :span="8">
					<div class="grid-content bg-purple-light">
						<div>
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
								class="demo-ruleForm">
								<el-form-item label="患者姓名" prop="name">
									<el-input v-model="ruleForm.name" placeholder="请输入患者姓名"></el-input>
								</el-form-item>
								
								<el-form-item label="检查项目" prop="item_name">
									<el-input v-model="ruleForm.item_name" placeholder="请输入检查项目"></el-input>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light">
						<div>
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
								class="demo-ruleForm">
								<el-form-item label="病历号" prop="id">
									<el-input v-model="ruleForm.id" placeholder="请输入病历号"></el-input>
								</el-form-item>

								<el-form-item label="检查时间" prop="check_time">
									<el-input v-model="ruleForm.check_time" placeholder="请输入检查时间"></el-input>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light">
						<div>
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
								class="demo-ruleForm">
								<el-form-item label="年龄" prop="age">
									<el-input v-model="ruleForm.age" placeholder="请输入年龄"></el-input>
								</el-form-item>

								<el-form-item label="检查医师" prop="check_doctor">
									<el-input v-model="ruleForm.check_doctor" placeholder="请输入检查医师"></el-input>
								</el-form-item>

							</el-form>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-main>
		<el-row :gutter="20">
			<el-col :span="24">
				<div>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
						<el-form-item label="检查结果及建议" prop="suggest">
							<el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1">
							</el-input>
							<div style="margin: 20px 0;"></div>

						</el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form>
				</div>
			</el-col>
		</el-row>

	</el-container>
</template>

<script>
	import axios from 'axios';
	import {
		showMsgTitle
	} from '@/utils/api'
	import {
		showMsgConfirm
	} from '@/utils/api'
	import {
		getRequest
	} from '@/utils/api'
	
	let id = 0;
	export default {
		data() {
			return {
				textarea1: '',
				tableData: [{}],
				ruleForm: {
					
					
				},

				rules: {
					name: [{
							required: true,
							message: '请输入患者姓名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					item_name: [{
						required: true,
						message: '请填写检查项目',
						trigger: 'blur'
					}],
					id: [{
						type: 'date',
						required: true,
						message: '请填写病历号',
						trigger: 'blur'
					}],
					check_time: [{
						type: 'date',
						required: true,
						message: '请填写检查时间',
						trigger: 'blur'
					}],
					age: [{
						type: 'array',
						required: true,
						message: '请填写检查年龄',
						trigger: 'blur'
					}],
					check_doctor: [{
						required: true,
						message: '请填写检查医师',
						trigger: 'blur'
					}],
					suggest: [{
						required: true,
						message: '请填写检查结果及建议',
						trigger: 'blur'
					}],

				}
			};
		},
		
		
		mounted: function() {
			let url = "/technology/input";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					//alert(resp.data);
					_this.ruleForm = resp.data;
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}).catch(resp => {
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败!'
				});
			});
			// this.axios.get('/api/user/allUser')
			// 	.then(res => {
			// 		this.tableData = res.data;
			// 	})
			// 	.catch(function(error) {
			// 		console.log(error);	
			// 	});
		},
		
		
		
		
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #4fc1b0;
		color: #ffffff;
		text-align: left;
		line-height: 60px;
		font-size: 50px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #000000;
		text-align: left;
		line-height: 10px;
		font-size: 30px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
